<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue命名路由和编程式路由实现</title>
    <!-- 导入vue库依赖 -->
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
</head>
<!-- 第一步导入vue和vuerouter js文件 -->

<body>
    <div id="app">
        <!-- 第二步申明router link标签 -->
        <router-link to="/user/1">User</router-link>
        <!-- 命名路由实现  to属性实现动态绑定 并且可以设置参数传递 -->
        <router-link :to="{name:'user', params:{id:2}}">User</router-link>
        <router-link to="/register">Register</router-link>

        <!-- 第三部 申明组件占位符 -->

        <router-view></router-view>
    </div>
    <script>
        // 第四步 创建组件
        var User = {
            template: `
            <div>
                <h3>user 命名路由规则匹配 -------- {{$route.params.id}}</h3>
                <button @click='jump'>点击跳转</button>
            </div>`,
            methods: {
                jump: function () {
                    // 编程式导航到register路由
                    this.$router.push('/register')
                }
            }
        }

        var Register = {
            template: `
            <div>
                <h3>register</h3>
                <button @click='back'>返回上一路由</button>
            </div>`,
            methods: {
                back: function () {
                    // 编程式导航到上一路由
                    this.$router.go(-1)
                }
            }
        }

        // 第五步 创建vue router实例
        var router = new VueRouter({
            // 所有的路由规则定义处
            routes: [
                // 重定向到user路由处
                { path: '/', redirect: '/user' },
                {
                    path: '/user/:id',
                    name: 'user',
                    component: User
                }, {
                    path: '/register',
                    component: Register
                }]
        })


        // 第六步  挂载router实例对象到vue实例上
        var vm = new Vue({
            el: '#app',
            router: router,
            data: {
                msg: ''
            },
            methods: {},
        })
    </script>
</body>

</html>

<!-- 路由管理器实现路由 -->

<!-- 命名路由其实就是给路由定义一个别名 路由跳转可以根据定义的别名实现跳转 -->



<!-- 路由跳转的两种方式
1.声明式导航：点击a或者router link标签实现的导航
2.编程式导航：通过api调用的方式 实现导航 关键api是 this.$router.push('路由地址')   this.$router.go(num) nun为-1表示返回上一个路由-->

<!-- push用法
    路径名称：字符串
router.push('/user')
带路径的对象
router.push({path:'/user'})
带路由别名的对象
router.push({name:'/user', params:{userid:123}})
带查询参数
router.push({path:'/user', query:{uname:'lishi'}}) -->